<template>
  <div>
    <nav-bar>
      <img @click="$router.back()" class="left" slot="left" src="../../assets/img/navbar/ic_title_close.png" alt="">
      <span slot="center">辅助工具</span>
    </nav-bar>
    <div class="content_box content_scroll">
      <div class="rebate">
        <div>返利申请网页版本</div>
        <div class="btn_box">
          <van-button 
            round 
            id="copy_text"
            :data-clipboard-text="list.rebate_url"
            @click="copyClick">复制</van-button>
          <van-button round @click="openWebClick">打开</van-button>
        </div>
      </div>
      <div class="rebate" @click="renameQuery">
        <div>游戏更名查询</div>
        <img src="../../assets/img/page/ic_game_recommend_arrow_right.png" alt="">
      </div> 
      <div class="rebate" @click="offlineQuery">
        <div>游戏下架查询</div>
        <img src="../../assets/img/page/ic_game_recommend_arrow_right.png" alt="">
      </div>
    </div>
  </div>
</template>

<script>
import NavBar from '../../components/common/navbar/NavBar.vue'
import Clipboard from 'clipboard'
import { getToolAPI } from '../../network/home'
  export default {
    name: 'PageTools',
    components: { NavBar },
    data() {
      return {
        list: {}
      }
    },
    created () {
      this.getTool()
    },
    methods: {
      getTool() {
        getToolAPI().then(res => {
          if (res.state === "ok") {
            console.log(res);
            this.list = res.data
          } else if (res.msg === "no_login") {
            this.$router.replace("/login");
          }
        })
      },
      openWebClick() {
        if(this.list.rebate_url !== '') {
          window.location.href = this.list.rebate_url
        }
      },
      renameQuery() {
        if (this.list.game_rename_url === '') {
          this.$toast('暂无内容')
        }
      },
      offlineQuery() {
        if (this.list.game_offline_url === '') {
          this.$toast('暂无内容')
        }
      },
      copyClick() {
        let clipboard = new Clipboard('#copy_text')
        clipboard.on('success', e => {
          this.$toast('已复制到剪切板')
          clipboard.destroy() // 释放内存
        })
        clipboard.on('error', e => {
          // 不支持复制
          this.$toast('该浏览器不支持复制')
          clipboard.destroy() // 释放内存
        })
      }
    },
  }
</script>

<style scoped>
.left {
  width: 44px;
  height: 44px;
}
.content_box {
  color: #333;
}
.rebate {
  width: 680px;
  height: 120px;
  padding: 0 35px;
  font-size: 28px;
  display: flex;
  align-items: center;
  justify-content: space-between;
  border-bottom: 1px solid rgb(219, 219, 219);
}

.rebate img {
  width: 20px;
}

.btn_box .van-button{
  font-size: 24px;
  padding: 0 40px;
  height: 55px;
  color: #999;
  font-weight: bold;
  margin-left: 20px;
  border: 1px solid #999;
}
</style>